<template>
  <div id="carousel-example-generic" class="carousel  hed carousel-fade" data-ride="carousel" style="" >
    <div class="carousel-inner" role="list box">
      <div class="item active" >
        <img src="../../assets/images/National_Flag/印度.jpg" alt="...">
        <div class="carousel-caption">
          印度
        </div>
      </div>
        <div class="item" v-for="(url,index) in urls">
        <img :src="url.url" alt="...">

        <div class="carousel-caption">
          第{{index+2}}届{{url.name}}
        </div>
      </div>
    </div>
    <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
      <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
      <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </a>
  </div>
</template>

<script>
import '../../assets/bootstrap-3.4.1-dist/css/bootstrap.min.css'
import '../../assets/bootstrap-3.4.1-dist/js/bootstrap.min'
export default {
  name: "RightPicture",
  data(){
    return{
      urls:[
        {url:require("../../assets/images/National_Flag/菲律宾.jpg"),name:"菲律宾"},

        {url:require("../../assets/images/National_Flag/日本.jpg"),name:"日本"},

        {url:require("../../assets/images/National_Flag/印度尼西亚.jpg"),name:"印度尼西亚"},

        {url:require("../../assets/images/National_Flag/泰国.jpg"),name:"泰国"},

        {url:require("../../assets/images/National_Flag/泰国.jpg"),name:"泰国"},

        {url:require("../../assets/images/National_Flag/Iran.jpg"),name:"伊朗"},

        {url:require("../../assets/images/National_Flag/泰国.jpg"),name:"泰国"},

        {url:require("../../assets/images/National_Flag/印度.jpg"),name:"印度"},

        {url:require("../../assets/images/National_Flag/韩国.jpg"),name:"韩国"},

        {url:require("../../assets/images/National_Flag/中国.jpg"),name:"中国"},

        {url:require("../../assets/images/National_Flag/日本.jpg"),name:"日本"},

        {url:require("../../assets/images/National_Flag/泰国.jpg"),name:"泰国"},

        {url:require("../../assets/images/National_Flag/韩国.jpg"),name:"韩国"},

        {url:require("../../assets/images/National_Flag/卡塔尔.jpg"),name:"卡塔尔"},

        {url:require("../../assets/images/National_Flag/中国.jpg"),name:"中国"},

        {url:require("../../assets/images/National_Flag/韩国.jpg"),name:"韩国"},

        {url:require("../../assets/images/National_Flag/印度尼西亚.jpg"),name:"印度尼西亚"},

        {url:require("../../assets/images/National_Flag/中国.jpg"),name:"中国"},

      ]
    }

  }
}
</script>

<style scoped>
</style>
